<template>
  <div class="hot_list">
    <div class="title">热门搜索</div>
    <div class="hot_list_item" v-for="item in hotList" @click="hotListItemClick(item.content)">
      <span class="list_item">{{item.content}}</span>
      <span class="el-icon-arrow-right"></span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HotList",
    props: {
      hotList: {
        type: Array,
        default() {
          return []
        }
      }
    },
    methods: {
      hotListItemClick(value) {
        console.log(value)
      }
    }
  }
</script>

<style scoped>
  .hot_list {
    padding-bottom: 10px;
  }

  .title {
    margin: 20px;
    font-size: 16px;
    color: #8F9395;
  }

  .hot_list_item {
    height: 30px;
    margin-bottom: 5px;
    padding-left: 20px;
    line-height: 30px;
    font-size: 14px;
    cursor: pointer;
  }

  .hot_list_item:hover {
    color: #3f579e;
  }

  .el-icon-arrow-right {
    float: right;
    margin-right: 20px;
    line-height: 30px;
  }
</style>
